<template>
	<!-- 商品组 -->
	<view class="diy-goods" :style="{ background: itemStyle.background }">
		<view :class="'goods-list display__' + itemStyle.display + ' column__' + itemStyle.column">
			<scroll-view :scroll-x="itemStyle.display === 'slide'">
				<view class="goods-item" v-for="(dataItem, index) in dataList" :key="index">
					<form @submit="onTargetGoods" report-submit="true" :data-id="dataItem.goods_id">
						<button formType="submit" class="btn-normal">
							<!-- 单列商品 -->
							<block v-if="itemStyle.column == 1">
								<view class="dis-flex">
									<!-- 商品图片 -->
									<view class="goods-item_left"><image class="image" :src="dataItem.image"></image></view>
									<view class="goods-item_right">
										<!-- 商品名称 -->
										<view v-if="itemStyle.show.goodsName" class="goods-item_title twolist-hidden">
											<text>{{ dataItem.goods_name }}</text>
										</view>
										<view class="goods-item_desc">
											<!-- 商品卖点 -->
											<view v-if="itemStyle.show.sellingPoint" class="desc-selling_point dis-flex">
												<text class="onelist-hidden">{{ dataItem.selling_point }}</text>
											</view>
											<!-- 商品销量 -->
											<view v-if="itemStyle.show.goodsSales" class="desc-goods_sales dis-flex">
												<text>已售{{ dataItem.goods_sales }}件</text>
											</view>
											<!-- 商品价格 -->
											<view class="desc_footer">
												<text v-if="itemStyle.show.goodsPrice" class="price_x">¥{{ dataItem.goods_price }}</text>
												<text class="price_y col-9" v-if="itemStyle.show.linePrice && dataItem.line_price > 0">¥{{ dataItem.line_price }}</text>
											</view>
										</view>
									</view>
								</view>
							</block>
							<!-- 多列商品 -->
							<block v-else>
								<!-- 商品图片 -->
								<view class="goods-image"><image class="image" mode="aspectFill" :src="dataItem.image"></image></view>
								<view class="detail">
									<!-- 商品标题 -->
									<view v-if="itemStyle.show.goodsName" class="goods-name f-28 twolist-hidden">{{ dataItem.goods_name }}</view>
									<!-- 商品价格 -->
									<view class="detail-price onelist-hidden">
										<text v-if="itemStyle.show.goodsPrice" class="goods-price f-30 col-m">￥{{ dataItem.goods_price }}</text>
										<text v-if="itemStyle.show.linePrice && dataItem.line_price > 0" class="line-price col-9 f-24">￥{{ dataItem.line_price }}</text>
									</view>
								</view>
							</block>
						</button>
					</form>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import Route from '@/utils/Route.js';
export default {
	props: {
		itemIndex: String,
		itemStyle: Object,
		params: Object,
		dataList: Array
	},
	data() {
		return {};
	},
	methods: {
		onTargetGoods(e) {
			// 记录formid
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: '/pages/goods/index?goods_id=' + e.currentTarget.dataset.id
			});
		}
	}
};
</script>

<style>
/* common.wxss */

/* @import "/utils/common.wxss"; */

/* 商品组 */

.diy-goods .goods-list {
	padding: 4rpx;
	box-sizing: border-box;
}

.diy-goods .goods-list .goods-item {
	box-sizing: border-box;
	padding: 6rpx;
}

.diy-goods .goods-list.display__slide {
	white-space: nowrap;
	font-size: 0;
}

.diy-goods .goods-list.display__slide .goods-item {
	display: inline-block;
}

.diy-goods .goods-list.display__list .goods-item {
	float: left;
}

.diy-goods .goods-list.column__2 .goods-item {
	width: 50%;
}

.diy-goods .goods-list.column__3 .goods-item {
	width: 33.33333%;
}

.diy-goods .goods-list .goods-item .goods-image {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	overflow: hidden;
	background: #fff;
}

.diy-goods .goods-list .goods-item .goods-image:after {
	content: '';
	display: block;
	margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
}

.diy-goods .goods-list .goods-item .goods-image .image {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-o-object-fit: cover;
	object-fit: cover;
}

.diy-goods .goods-list .goods-item .detail {
	padding: 8rpx;
	background: #fff;
}

.diy-goods .goods-list .goods-item .detail .goods-name {
	height: 72rpx;
	line-height: 1.3;
	white-space: normal;
}

.diy-goods .goods-list .goods-item .detail .detail-price .goods-price {
	margin-right: 8rpx;
}

.diy-goods .goods-list .goods-item .detail .detail-price .line-price {
	text-decoration: line-through;
}

/* 单列商品 */

.diy-goods .goods-list.column__1 .goods-item {
	width: 100%;
	height: 280rpx;
	margin-bottom: 12rpx;
	padding: 20rpx;
	box-sizing: border-box;
	background: #fff;
}

.diy-goods .goods-list.column__1 .goods-item {
	line-height: 1.6;
}

.diy-goods .goods-list.column__1 .goods-item:last-child {
	margin-bottom: 0;
}

.diy-goods .goods-list.column__1 .goods-item_left {
	display: flex;
	width: 40%;
	background: #fff;
	align-items: center;
}

.diy-goods .goods-list.column__1 .goods-item_left .image {
	display: block;
	width: 240rpx;
	height: 240rpx;
}

.diy-goods .goods-list.column__1 .goods-item_right {
	position: relative;
	width: 60%;
}

.diy-goods .goods-list.column__1 .goods-item_right .goods-item_title {
	height: 72rpx;
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #333;
}

.diy-goods .goods-list.column__1 .goods-item_right .goods-item_title {
	line-height: 1.3;
}

.diy-goods .goods-list.column__1 .goods-item_desc {
	margin-top: 8rpx;
}

.diy-goods .goods-list.column__1 .desc-selling_point {
	width: 400rpx;
	/* height: 40rpx; */
	font-size: 24rpx;
	color: #ff495e;
}

.diy-goods .goods-list.column__1 .desc-goods_sales {
	color: #999;
	font-size: 24rpx;
}

.diy-goods .goods-list.column__1 .desc_footer {
	font-size: 24rpx;
}

.diy-goods .goods-list.column__1 .desc_footer .price_x {
	margin-right: 16rpx;
	color: #f03c3c;
	font-size: 30rpx;
}

.diy-goods .goods-list.column__1 .desc_footer .price_y {
	text-decoration: line-through;
}
</style>
